<template>
  <div>
    <welcome-content v-if="show" :strType="form.welcomeMsgTplType === '3'" :isSingle="form.welcomeMsgTplType === '3'" :showTemplate="false" :showMember="form.welcomeMsgTplType === '2'" :showMorMaterial="true" :baseData="materialData" @submit="getWelData"></welcome-content>
  </div>
</template>

<script>
import { addOrUpdate } from '@/api/drainageCode/welcome'
import WelcomeContent from '@/components/WelcomeContent.vue'
  
export default {
  components: {
    WelcomeContent
  },
  props: {},
  data () {
    return {
      name: '活码',
      type: '新建',
      materialData: {
        welcomeMsg: '',
        materialMsgList: []
      },
      dialogVisible: false,
      dialogVisibleSelectMaterial: false,
      form: {
        id: '',
        welcomeMsgTplType: '',
        welcomeMsg: '',
        materialMsgList: []
      },
      // 遮罩层
      loading: false,
      show: false
    }
  },
  watch: {},
  computed: {},
  created () {
    this.form.id = this.$route.query.id
    if (this.form.id) {
      let data = JSON.parse(localStorage.getItem('obj'))
      this.form = Object.assign(this.form, data)
      this.form.welcomeMsgTplType = this.form.welcomeMsgTplType.toString()
    } else {
      this.form.welcomeMsgTplType = this.$route.query.welcomeMsgTplType
    }
    this.name = this.form.welcomeMsgTplType === '1' ? '活码' : this.form.welcomeMsgTplType === '2' ? '员工' : '入群'
    this.type = this.form.id ? '编辑' : '新建'
    this.$route.meta.title = (this.form.id ? '编辑' : '新建') + '欢迎语'
    this.form.id && this.getData()
  },
  mounted () {
    this.show = true
  },
  methods: {
    getWelData (data) {
      this.form.welcomeMsg = data.welcomeMsg
      let img = []
      let imgText = []
      let applet = []
      data.materialMsgList.forEach((unit, key) => {
        if (unit.msgType === '0') {
          img.push(unit.materialUrl)
        }
        if (unit.msgType === '8') {
          let obj = {
            imageTextTile: unit.materialName,
            imageTextUrl: unit.materialUrl
          }
          imgText.push(obj)
        }
        if (unit.msgType === '9') {
          let oob = {
            appTile: unit.materialName,
            appId: unit.digest,
            appPath: unit.materialUrl,
            appPic: unit.coverUrl
          }
          applet.push(oob)
        }
      })
      if (applet.length) {
        this.form.applet = applet
      } else {
        this.form.applet = []
      }
      if (imgText.length) {
        this.form.imageText = imgText
      } else {
        this.form.imageText = []
      }
      if (img.length) {
        this.form.picUrl = img.join(',')
      } else {
        this.form.picUrl = ''
      }
      if (this.form.welcomeMsgTplType === '2') {
        this.form.userIds = data.users.map(dd => {
          return dd.userId
        }).join(',')
      }
      this.submit()
    },
    getData () {
      // getPreview(this.form.id).then(({ data }) => {
      this.materialData = this.form
      this.materialData.users = []
      if (this.materialData.userIds) {
        let name = this.materialData.userNames.split(',')
        this.materialData.userIds.split(',').forEach((ddd, index) => {
          let obj = {
            useUserId: ddd,
            userName: name[index]
          }
          this.materialData.users.push(obj)
        })
      }
      this.materialData.materialMsgList = []
      let img = []
      let imgText = []
      let applet = []
      if (this.form.picUrl) {
        this.form.picUrl.split(',').forEach(dd => {
          let obj = {
            materialUrl: dd,
            msgType: '0',
          }
          img.push(obj)
        })
      }
      if (this.form.imageText && this.form.imageText.length) {
        this.form.imageText.forEach(dd => {
          let obj = {
            materialName: dd.imageTextTile,
            materialUrl: dd.imageTextUrl,
            msgType: '8'
          }
          imgText.push(obj)
        })
      }
      if (this.form.applet && this.form.applet.length) {
        this.form.applet.forEach(cc => {
          let obj = {
            materialName: cc.appTile,
            digest: cc.appId,
            materialUrl: cc.appPath,
            coverUrl: cc.appPic,
            msgType: '9'
          }
          applet.push(obj)
        })
      }
      this.materialData.materialMsgList.push(...img)
      this.materialData.materialMsgList.push(...imgText)
      this.materialData.materialMsgList.push(...applet)
      this.$forceUpdate()
      // })
    },
    submit () {
      addOrUpdate(this.form)
        .then(({
          data
        }) => {
          this.msgSuccess('操作成功')
          this.loading = false
          // this.$router.back()
          console.log(this.form.welcomeMsgTplType === '1')
          this.$router.push({
            path: '/drainageCode/welcome/',
            query: {
              type: this.form.welcomeMsgTplType.toString()
            }
          })
        })
        .catch(() => {
          this.loading = false
        })
    }
  },
}
</script>

<style lang="scss" scoped>
  .page {
    padding: 30px;
    background-color: #fff;
    border-radius: 8px;
  }

  .form {
    width: 50%;
    max-width: 500px;
  }

  .filter-wrap {
    justify-content: space-between;
  }

  .list-wrap {
    flex-wrap: wrap;
  }

  .crumb- {
    // 一级 页面标题
    &title {
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 90px; // line-height: 90px;
      font-size: 18px;
      font-weight: 500;
      color: #333;
      padding: 0 20px;
      background: #fff;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
    }
  }

  .crumb {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
    display: flex;
  }
</style>
